<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="tourism" value="<%=request.getContextPath()%>"/>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tourism</title>
    <link href="${tourism}/Wopop_files/style_log.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="${tourism}/Wopop_files/style_log2.css">
    <link rel="stylesheet" type="text/css" href="${tourism}/Wopop_files/userpanel.css">
    <link rel="stylesheet" type="text/css" href="${tourism}/Wopop_files/jquery.ui.all.css">
    <%--<script src="js/jquery.min.js"></script>--%>
    <script src="${tourism}/js/jquery-2.1.4.min.js"></script>

</head>

<body class="login" mycollectionplug="bind">
<div class="login_m">
    <div class="login_logo"><img src="${tourism}/Wopop_files/logo.png" width="196" height="46"></div>
    <div class="login_boder">

        <div class="login_padding" id="login_model">

            <h2>USERNAME</h2>
            <label>
                <input type="text" id="username" class="txt_input txt_input2"
                       onfocus="if (value ==&#39;Your name&#39;){value =&#39;&#39;}"
                       onblur="if (value ==&#39;&#39;){value=&#39;Your name&#39;}" value="Your name">
            </label>
            <h2>PASSWORD</h2>
            <label>
                <input type="password" name="textfield2" id="userpwd" class="txt_input"
                       onfocus="if (value ==&#39;******&#39;){value =&#39;&#39;}"
                       onblur="if (value ==&#39;&#39;){value=&#39;******&#39;}"
                       value="******">
            </label>

            <p class="forgot"><a id="iforget" href="javascript:void(0);">Forgot your password?</a></p>
            <div class="rem_sub">
                <div class="rem_sub_l">
                    <input type="checkbox" name="checkbox" id="save_me">
                    <label>Remember me</label>
                </div>
                <label>
                    <input type="submit" class="sub_button" name="button" id="btn1" value="Login"
                           style="opacity: 0.7;">
                </label>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#btn1').click(function () {
            var username = $("#username").val();
            var password = $("#userpwd").val();
            var param = {
                "username": username,
                "password": password
            }

            /*console.log(JSON.stringify(param));*/
            if (username != "Your name") {
                $.ajax({
                    url: '${tourism}/api/login',
                    type: 'post',
                    data: JSON.stringify(param),
                    dataType: "json",
                    contentType: 'application/json;charset=UTF-8',
                    success: function (result) {
                        console.log(result.data);
                        if (result.code == 200) {
                            window.location.href = "${tourism}";
                            if (result.data.permission === "admin") {
                                window.location.href = "${tourism}/admin";
                            } else if (result.data.permission === "user") {
                                window.location.href = "${tourism}";
                            }
                        } else {
                            alert(result.message)
                            window.location.replace("${tourism}/login");
                        }
                    }
                });
            }
        });
    });
</script>
</body>
</html>